<template>
  <div class="content" v-if="orderDetails">
    <div class="status">
      <div class="status-text" v-if="orderDetails.status === 0">
        <div class="tit">待确认状态</div>
        <div class="info">
          剩余时间 <countdown :end="orderDetails.end_time" />
        </div>
        <div class="action" @click="enterOrder(orderDetails.id)">确认下单</div>
      </div>
      <div class="status-text" v-if="orderDetails.status === 1">
        <div class="tit">待发货状态</div>
        <div class="info"></div>
        <div class="action" @click="clearOrder(orderDetails.id)">取消订单</div>
      </div>
      <div class="status-text" v-if="orderDetails.status === 2">
        <div class="tit">待收货状态</div>
        <div class="info"></div>
        <div class="action" @click="receiptOrder(orderDetails.id)">
          确认收货
        </div>
      </div>
      <div class="status-text" v-if="orderDetails.status === 3">
        <div class="tit">交易成功</div>
        <div class="info"></div>
        <div class="action" @click="refundOrder(orderDetails.id)">申请售后</div>
      </div>
      <div class="order-info">
        <div class="left">
          <div class="item">
            <span>订单号：</span><b>{{ orderDetails.order_number }}</b>
          </div>
          <div class="item">
            <span>下单时间：</span>
            <b>
              {{ dayjs(orderDetails.add_time).format("YYYY-MM-DD HH:mm:ss") }}
            </b>
          </div>
          <!-- <div class="item"><span>支付方式：</span><b>21411432411</b></div> -->
          <div class="item">
            <span>支付时间：</span>
            <b v-if="orderDetails.pay_time">
              {{ dayjs(orderDetails.pay_time).format("YYYY-MM-DD HH:mm:ss") }}
            </b>
            <b v-else>等待支付</b>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <span>收件人：</span><b>{{ orderDetails.contact }}</b>
          </div>
          <div class="item">
            <span>联系方式：</span><b>{{ orderDetails.phone }}</b>
          </div>
          <div class="item">
            <span>收货地址：</span>
            <b>{{
              orderDetails.province +
              orderDetails.city +
              orderDetails.area +
              orderDetails.detail
            }}</b>
          </div>
        </div>
      </div>
    </div>
    <div class="delivery" v-if="orderDetails.status == 2">
      <div class="package">
        <div class="title">包裹1</div>
        <div class="info">
          <img :src="displayImg" alt="" />
          <div class="company">
            <div class="name">物流公司：韵达快递</div>
            <div class="num">物流单号：141451QWQE2142325</div>
          </div>
          <div class="flex"></div>
          <div class="timeline">
            <div class="tips">物流信息：</div>
            <div class="list">
              <div class="item">2020-2-1 09:02 商家已发货</div>
              <div class="item">2020-2-1 09:02 商品出库</div>
            </div>
            <div class="all">查看完整物流信息</div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div class="title">商品信息</div>
      <div class="shop-item">
        <div class="shop-title">
          <img :src="orderDetails.shop_img" alt="" />
          <div class="tit">{{ orderDetails.shop_name }}</div>
        </div>
        <div class="goods">
          <div class="goods-title">
            <div class="info">商品信息</div>
            <div class="spec">规格</div>
            <div class="price">单价</div>
            <div class="number">数量</div>
            <div class="price1">优惠金额</div>
            <div class="money">金额</div>
          </div>
          <div class="goods-list">
            <div
              class="item"
              v-for="(goods, i) in orderDetails.orderdetail"
              :key="i"
            >
              <img :src="goods.banner" alt="" />
              <div class="tit">{{ goods.good_name }}</div>
              <!-- <div class="spec" v-html="goods.name_attr.join('<br/>')"></div> -->
              <div class="spec" v-html="goods.name"></div>
              <div class="price">
                <b>￥{{ goods.price }}</b>
                <!-- <s>￥{{ goods.del_price }}</s> -->
              </div>
              <div class="num">x{{ goods.goods_quantity }}</div>
              <div class="price1">
                <b>￥{{ goods.coupon_price }}</b>
              </div>
              <div class="money">￥{{ goods.total_price }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="total">
      <div class="price">
        <div class="price-total item">
          <span>商品总计</span><b>¥ {{ orderDetails.total }}</b>
        </div>
        <div class="youhui item">
          <span>店铺优惠</span><span>满100元减10元</span><b> - ¥ 10.00</b>
        </div>
        <!-- <div class="peisong item">
          <span>运送方式</span><span>普通快递</span><b>¥ 8.00</b>
        </div> -->
        <div class="pay-price item">
          <span>实付款</span><b>¥ {{ orderDetails.need_payment }}</b>
        </div>
      </div>
    </div>
    <div class="like">
      <YouLike />
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import api from "@/api";
import YouLike from "@/components/YouLike/YouLike1.vue";
import Countdown from "@/components/Countdown/Countdown.vue";
export default {
  name: "OrderDetails",
  components: { YouLike, Countdown },
  data() {
    return {
      dayjs,
      id: "",
      orderDetails: null,
    };
  },
  async created() {
    this.orderDetails = await api.ORDER_DATAILS(this.$route.params.id);
    console.log(this.orderDetails);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  .status {
    max-width: 1200px;
    margin: 0 auto;
    height: 162px;
    background: #ffffff;
    border: 1px solid #dedede;
    border-top: 6px solid #4ba346;
    display: flex;
    .status-text {
      width: 319px;
      box-sizing: border-box;
      border-right: 1px solid #dedede;
      padding: 20px;
      .tit {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        line-height: 28px;
      }
      .info {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        padding: 12px 0 20px 0;
      }
      .action {
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }
    }
    .order-info {
      flex: 1;
      width: 0;
      padding: 20px;
      display: flex;
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      .item {
        margin-bottom: 12px;
        display: flex;
        span {
          width: 70px;
          white-space: nowrap;
          margin-right: 44px;
        }
        b {
          font-weight: 400;
        }
      }
      .left {
        width: 324px;
        span {
          margin-right: 12px;
        }
      }
      .right {
        flex: 1;
        width: 0;
      }
    }
  }
  .delivery {
    max-width: 1200px;
    margin: 20px auto;
    width: 1200px;
    height: 142px;
    background: #f9f9f9;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 16px;
    border: 1px solid #dedede;
    .package {
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        line-height: 28px;
      }
      .info {
        display: flex;
        padding: 2px 0 0 0;
        img {
          width: 52px;
          height: 52px;
          border-radius: 1px;
          margin: 12px 20px 12px 0;
        }
        .company {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          .name {
            margin: 12px 0;
          }
        }
      }
      .flex {
        flex: 1;
      }
      .timeline {
        width: 848px;
        box-sizing: border-box;
        padding: 12px;
        height: 77px;
        background: #e7e7e7;
        border-radius: 5px;
        display: flex;
        .tips {
          width: 70px;
          margin-right: 8px;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
        .list {
          flex: 1;
          width: 0;
          .item {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
            padding-left: 15px;
            position: relative;
            margin-top: 12px;
            &:first-child {
              margin-top: 0;
              color: #d52c1a;
              &::after {
                background: #d52c1a;
              }
            }
            &::after {
              content: "";
              display: block;
              width: 6px;
              height: 6px;
              border-radius: 50px;
              position: absolute;
              background: #d8d8d8;
              left: 0;
              top: 7px;
            }
          }
        }
        .all {
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }
      }
    }
  }
  .goods {
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid #dedede;
    .title {
      font-size: 20px;
      font-weight: 600;
      color: #333333;
      line-height: 28px;
      padding: 20px 20px 0;
    }
    .shop-item {
      max-width: 1200px;
      margin: 16px auto 0;
      .shop-title {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        img {
          margin: 0 12px 0 17px;
          width: 28px;
          height: 28px;
          border-radius: 5px;
        }
        .tit {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
      }
      .goods {
        background: #fff;
        border: 1px solid #dedede;
        margin: 0;
        .goods-title {
          height: 42px;
          background: #f3f5f9;
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #333333;
          .info {
            width: 64px;
            padding: 0 248px 0 107px;
          }
          .spec {
            width: 32px;
            padding-right: 128px;
          }
          .price {
            width: 32px;
            padding-right: 146px;
          }
          .number {
            width: 32px;
            padding-right: 108px;
          }
          .price1 {
            width: 64px;
            padding-right: 168px;
          }
        }
        .goods-list {
          .item {
            margin: 16px 16px 20px;
            display: flex;
            img {
              width: 78px;
              height: 78px;
              border-radius: 5px;
            }
            .tit {
              width: 240px;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              margin: 0 73px 0 12px;
            }
            .spec {
              width: 120px;
              margin-right: 40px;
              font-size: 14px;
              color: #666666;
              line-height: 20px;
            }
            .price {
              width: 80px;
              margin-right: 97px;
              display: flex;
              flex-direction: column;
              font-size: 14px;
              font-weight: 600;
              color: #333333;
              line-height: 20px;
              s {
                color: #999999;
                font-weight: 600;
              }
            }
            .num {
              width: 80px;
              margin-right: 62px;
            }
            .price1 {
              font-size: 14px;
              font-weight: 600;
              color: #333333;
            }
            .money {
              flex: 1;
              font-size: 16px;
              font-weight: 600;
              color: #d52c1a;
              line-height: 22px;
              text-align: right;
              padding-right: 20px;
            }
          }
        }
      }
    }
  }
  .total {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    .price {
      width: 380px;
      // height: 183px;
      padding: 20px 40px 20px 20px;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid #dedede;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        span {
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          margin-right: 12px;
        }
        b {
          flex: 1;
          text-align: right;
          font-size: 16px;
          font-weight: 600;
          color: #d52c1a;
          line-height: 22px;
        }
      }
      .pay-price {
        padding-top: 14px;
        span {
          font-weight: 600;
        }
        b {
          font-size: 24px;
        }
      }
    }
  }
  .like {
    padding: 1px 0;
  }
}
</style>
